﻿.csswizardary body, .csswizardary div, .csswizardary dl, .csswizardary dt, .csswizardary dd, .csswizardary ul, .csswizardary ol, .csswizardary li, .csswizardary h1, .csswizardary h2, .csswizardary h3, .csswizardary h4, .csswizardary h5, .csswizardary h6, .csswizardary pre, .csswizardary form, .csswizardary fieldset, .csswizardary input, .csswizardary textarea, .csswizardary p, .csswizardary blockquote, .csswizardary th, .csswizardary td
{
    margin: 0;
    padding: 0;
}
.csswizardary table
{
    border-collapse: collapse;
    border-spacing: 0;
}
.csswizardary fieldset, .csswizardary img
{
    border: 0 none;
}
.csswizardary address, .csswizardary caption, .csswizardary cite, .csswizardary dfn, .csswizardary th, .csswizardary var
{
    font-style: normal;
    font-weight: normal;
}
.csswizardary caption, .csswizardary th
{
    text-align: left;
}
.csswizardary h1, .csswizardary h2, .csswizardary h3, .csswizardary h4, .csswizardary h5, .csswizardary h6
{
    font-size: 100%;
    font-weight: normal;
}
.csswizardary q:before, .csswizardary q:after
{
    content: "";
}
.csswizardary abbr, .csswizardary acronym
{
    border: 0 none;
}
.csswizardary html
{
    background: none repeat scroll 0 0 #FFFFFF;
    color: #666666;
    font-family: Cambria, Georgia, "Times New Roman" , Times, serif;
    font-size: 100%;
    height: 101%;
}
.csswizardary body
{
    margin: 0 auto;
    padding: 75px 10px;
    position: relative;
    width: 940px;
}
.csswizardary #header, .csswizardary #content, .csswizardary #sub-content
{
    display: inline;
    float: left;
}
.csswizardary #content
{
    margin: 0 80px 0 180px;
    position: relative;
    width: 460px;
    word-wrap: break-word;
    z-index: 2;
}
.csswizardary #sub-content
{
    color: #AAAAAA;
    width: 220px;
}
.csswizardary #sub-content:hover
{
    color: #666666;
}
.csswizardary #header
{
    margin-right: 20px;
    width: 160px;
}
.csswizardary #header div
{
    position: fixed;
    width: 160px;
}
.csswizardary #logo a
{
    background: none repeat scroll 0 0 #F43059;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: block;
    float: right;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3.75em;
    height: 100px;
    line-height: 3em;
    margin-bottom: 24px;
    overflow: hidden;
    text-indent: -12px;
    text-shadow: 0 -1px #d21038;
    width: 100px;
}
.csswizardary #nav
{
    clear: both;
    list-style: none outside none;
    margin-bottom: 0;
    text-align: right;
}
.csswizardary #nav a
{
    border-bottom: 1px solid #F7F7F7;
    color: #BBBBBB;
    display: block;
    font-family: Arial;
    font-size: 0.625em;
    font-weight: bold;
    padding: 5px 0;
    text-transform: uppercase;
}
.csswizardary #nav li:last-of-type a
{
    border: medium none;
}
.csswizardary .home #nav .nav-home a, .csswizardary #nav .current_page_item a
{
    color: #F43059;
    cursor: default;
    text-decoration: none;
}
.csswizardary #footer
{
    clear: both;
    color: #999999;
    padding-left: 180px;
}
.csswizardary #footer address
{
    line-height: 38px;
}
.csswizardary #smashing-network
{
    background: url("img/css/smashing-network.gif") no-repeat scroll left top #ffffcc;
    display: block;
    float: left;
    height: 38px;
    margin: 0 0 0 -60px;
    outline: medium none;
    overflow: hidden;
    position: relative;
    text-indent: -9999px;
    width: 40px;
}
.csswizardary #smashing-network:hover
{
    background-position: left bottom;
}
.csswizardary h1, .csswizardary h2, .csswizardary h3, .csswizardary h4, .csswizardary h5, .csswizardary h6
{
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    margin-bottom: 24px;
}
.csswizardary h1
{
    font-size: 24px;
    line-height: 1em;
    margin: 0 0 24px 180px;
    padding-right: 300px;
    width: 460px;
}
.csswizardary h2
{
    font-size: 20px;
    line-height: 24px;
}
.csswizardary .archive h2
{
    margin: 0;
}
.csswizardary h3
{
    font-size: 18px;
    line-height: 24px;
}
.csswizardary h4
{
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}
.csswizardary h5
{
    font-family: Arial, sans-serif;
    font-size: 10px;
    line-height: 24px;
    margin: 0;
    text-transform: uppercase;
}
.csswizardary p
{
    line-height: 1.5em;
    margin-bottom: 24px;
}
.csswizardary .marginalia
{
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.9);
    clear: both;
    color: #999999;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    line-height: 2em;
    margin: -5px 0 19px -180px;
    padding: 5px 0;
    text-align: right;
    width: 160px;
}
.csswizardary p.intro-copy
{
    font-size: 1.125em;
    line-height: 1.333em;
}
.csswizardary .single #content > p:first-of-type:first-line
{
    font-variant: small-caps;
}
.csswizardary a
{
    color: #F43059;
    text-decoration: none;
}
.csswizardary a:visited
{
    color: #F56F8B;
}
.csswizardary a:hover
{
    text-decoration: underline;
}
.csswizardary a:active, .csswizardary a:focus
{
    position: relative;
    top: 1px;
}
.csswizardary ul, .csswizardary ol
{
    font-size: 1em;
    margin-bottom: 24px;
}
.csswizardary #content ul, .csswizardary #content ol
{
    padding: 0 0 0 60px;
}
.csswizardary ul
{
    list-style: square outside none;
}
.csswizardary ol
{
    list-style: lower-roman outside none;
}
.csswizardary li
{
    line-height: 1.5em;
}
.csswizardary ul ul, .csswizardary ul ol, .csswizardary ol ol, .csswizardary ol ul
{
    margin: 0;
}
.csswizardary dl
{
    line-height: 1.5em;
    margin-bottom: 24px;
}
.csswizardary dt
{
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
}
.csswizardary dt:after
{
    content: ":";
}
.csswizardary dd
{
    margin-left: 60px;
}
.csswizardary address
{
    font-style: italic;
}
.csswizardary .opener
{
    font-variant: small-caps;
}
.csswizardary pre, .csswizardary code
{
    background: none repeat scroll 0 0 #FEF8C4;
    font-family: monospace;
    word-wrap: normal;
}
.csswizardary pre
{
    background: none repeat scroll 0 0 #FEF8C4;
    border: 1px solid #D8D566;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px #FFFFFF inset;
    clear: both;
    display: block;
    margin: 0 -60px 24px 0;
    overflow: auto;
    padding: 10px;
    position: relative;
}
.csswizardary pre code
{
    background: none repeat scroll 0 0 transparent;
}
.csswizardary .code-comment
{
    color: #008800;
}
.csswizardary mark
{
    background: none repeat scroll 0 0 #FEF8C4;
    font-weight: bold;
}
.csswizardary pre mark, .csswizardary code mark
{
    border-bottom: 1px solid #D8D566;
}
.csswizardary blockquote
{
    border-left: 5px solid #CCCCCC;
    display: block;
    margin: 0 -60px 24px 0;
    padding-left: 10px;
}
.csswizardary blockquote p
{
    color: #666666;
    font-style: italic;
    margin: 0;
    text-indent: -0.4em;
}
.csswizardary blockquote p strong
{
    display: block;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-size: 0.66666em;
    text-indent: 0;
}
.csswizardary abbr
{
    border-bottom: 1px dotted #F43059;
    color: #F43059;
    cursor: help;
}
.csswizardary q
{
    font-style: italic;
}
.csswizardary ins
{
    background: none repeat scroll 0 0 #FEDAE3;
    border-bottom: 1px solid #F9AFBF;
    text-decoration: none;
}
.csswizardary cite
{
    font-style: italic;
}
.csswizardary small
{
    color: #999999;
}
.csswizardary #fin
{
    clear: both;
    color: #999999;
    text-align: right;
}
.csswizardary img
{
    height: auto;
    max-width: 520px;
}
.csswizardary .full
{
    height: auto;
    margin: 0 -60px 0 0;
    width: 520px;
}
.csswizardary #social
{
    list-style: none outside none;
    margin: 0 0 24px;
    padding: 0;
}
.csswizardary #social li
{
    margin-bottom: 5px;
}
.csswizardary #social a
{
    -moz-transition: padding 0.2s linear 0s;
    background-image: url("img/css/social.png");
    background-repeat: no-repeat;
    display: block;
    line-height: 33px;
    padding-left: 40px;
}
.csswizardary #twitter-link a:hover
{
    background-position: left 0;
}
.csswizardary #twitter-link a
{
    background-position: left -33px;
}
.csswizardary #dribbble-link a
{
    background-position: left -99px;
}
.csswizardary #dribbble-link a:hover
{
    background-position: left -67px;
}
.csswizardary #feed-link a
{
    background-position: left -165px;
}
.csswizardary #feed-link a:hover
{
    background-position: left -132px;
}
.csswizardary .net-awards
{
    background: -moz-linear-gradient(left center, #fc016b 0%, #ffa322 100%) repeat scroll 0 0 transparent;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    display: block;
    margin-bottom: 1.5em;
    padding: 1em;
}
.csswizardary .net-awards img
{
    display: block;
    margin-bottom: 5px;
}
.csswizardary .net-awards h3, .csswizardary .net-awards p
{
    color: #FFFFFF;
    font-size: 1em;
    margin: 0;
}
.csswizardary .net-awards, .csswizardary .net-awards:hover
{
    text-decoration: none;
}
.csswizardary .net-awards:hover b
{
    text-decoration: underline;
}
.csswizardary .portfolio-notes
{
    -moz-column-count: 2;
    -moz-column-gap: 20px;
}
.csswizardary .home hr + h2
{
    margin-bottom: 0;
}
.csswizardary .post-info, .csswizardary .comment-author
{
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.75em;
    line-height: 2em;
    margin-bottom: 24px;
}
.csswizardary .post-info
{
    clear: both;
}
.csswizardary .post-date
{
    color: #999999;
    font-style: italic;
}
.csswizardary .postmetadata
{
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 0;
    clear: both;
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.75em;
    padding: 10px 0;
}
.csswizardary .post-tags
{
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
}
.csswizardary ol.commentlist
{
    list-style: none outside none;
    padding: 0 !important;
}
.csswizardary .comment-author
{
    float: left;
    margin-left: -180px;
    width: 160px;
}
.csswizardary .navigation
{
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0 !important;
    width: 100%;
}
.csswizardary .navigation li
{
    margin-bottom: 24px;
    width: 50%;
}
.csswizardary .prev-link
{
    float: left;
}
.csswizardary .next-link
{
    float: right;
    text-align: right;
}
.csswizardary .prev-link:empty, .csswizardary .next-link:empty
{
    display: none;
}
.csswizardary fieldset
{
    border: 1px solid #CCCCCC;
    border-radius: 2px 2px 2px 2px;
    margin-bottom: 24px;
    padding: 10px;
}
.csswizardary legend
{
    color: #333333;
    white-space: normal;
}
.csswizardary legend, .csswizardary label
{
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
}
.csswizardary .form-row
{
    padding: 10px 0;
}
.csswizardary .text-input
{
    width: 220px;
}
.csswizardary .text-input, .csswizardary textarea
{
    border: 1px solid #CCCCCC;
    border-radius: 2px 2px 2px 2px;
    font-family: Arial, Verdana, sans-serif;
    padding: 5px;
}
.csswizardary textarea
{
    width: 426px;
}
.csswizardary .text-input:focus, .csswizardary textarea:focus
{
    background: none repeat scroll 0 0 #FFFFCC;
    border: 1px solid #AAAAAA;
}
.csswizardary label
{
    cursor: pointer;
    display: block;
}
.csswizardary #submit, .csswizardary #search-submit
{
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #F43059;
    cursor: pointer;
    font-family: Georgia, "Times New Roman" , Times, serif;
    font-size: 1em;
}
.csswizardary #sub-content form
{
    margin-bottom: 24px;
}
.csswizardary #sub-content .text-input
{
    width: 208px;
}
.csswizardary table
{
    margin-bottom: 24px;
}
.csswizardary table.outdent caption
{
    margin-left: 0;
}
.csswizardary caption
{
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: 24px;
}
.csswizardary table th
{
    border: 1px solid #999999;
    font-family: Helvetica, Arial, Verdana, sans-serif;
    font-weight: bold;
    padding: 0 1em;
    text-align: center;
}
.csswizardary table tr
{
    line-height: 1.5em;
    margin-bottom: 1.5em;
}
.csswizardary table td
{
    border: 1px solid #CCCCCC;
    padding: 1.45em;
    vertical-align: top;
}
.csswizardary table .empty
{
    border: medium none;
}
.csswizardary table.data tr:nth-of-type(2n+1)
{
    background: none repeat scroll 0 0 #FFFFCC;
}
.csswizardary .info-message, .csswizardary .hilite
{
    background: url("img/css/warning.png") no-repeat scroll 10px center #fef8c4;
    border: 1px solid #D8D566;
    border-radius: 2px 2px 2px 2px;
    box-shadow: 0 1px #FFFFFF inset;
    clear: both;
    display: block;
    padding: 10px 10px 10px 36px;
}
.csswizardary .info-message strong, .csswizardary .info-message a, .csswizardary .hilite strong, .csswizardary .hilite a, .csswizardary a.hilite
{
    color: #753F01;
}
.csswizardary .hilite a, .csswizardary a.hilite
{
    font-family: Calibri, sans-serif;
    font-weight: bold;
}
.csswizardary .hilite
{
    background: none repeat scroll 0 0 #FEF8C4;
    padding: 10px;
}
.csswizardary .bsap
{
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC;
    border-style: solid;
    border-width: 1px 0;
    margin: 0;
    padding: 10px 0;
}
.csswizardary body .adpacks
{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 3px solid #EEEEEE;
    margin: 15px 0 0;
    padding: 15px;
}
.csswizardary body .one .bsa_it_ad
{
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    font-family: inherit;
    margin: 0;
    padding: 0;
}
.csswizardary body .one .bsa_it_ad:hover img
{
    box-shadow: 0 0 3px #000000;
}
.csswizardary body .one .bsa_it_ad .bsa_it_i
{
    display: block;
    float: none;
    margin: 0 0 5px;
    padding: 0;
}
.csswizardary body .one .bsa_it_ad .bsa_it_i img
{
    border: medium none;
    padding: 0;
}
.csswizardary body .one .bsa_it_ad .bsa_it_t
{
    padding: 6px 0 0;
}
.csswizardary body .one .bsa_it_p
{
    display: none;
}
.csswizardary body #bsap_aplink, .csswizardary body #bsap_aplink:hover
{
    display: block;
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
}
.csswizardary .accessibility
{
    left: -9999px;
    position: absolute;
}
.csswizardary hr
{
    background: none repeat scroll 0 0 #CCCCCC;
    border: medium none;
    clear: both;
    display: block;
    height: 1px;
    margin: 0 0 24px;
    padding: 0;
    position: relative;
}
.csswizardary .left
{
    float: left;
    margin-right: 20px;
}
.csswizardary .right
{
    float: right;
    margin-left: 20px;
}
.csswizardary *::-moz-selection
{
    background: none repeat scroll 0 0 #F43059;
    color: #FFFFFF;
}
.csswizardary body
{
    margin: 0 auto;
    padding: 75px 0;
    width: 700px;
}
.csswizardary #header, .csswizardary #header div
{
    display: block;
    float: none;
    margin: 0;
    overflow: hidden;
    position: static;
    width: 700px;
}
.csswizardary #header
{
    margin: 0 0 24px;
}
.csswizardary #content
{
    margin: 0 80px 0 0;
}
.csswizardary #sub-content
{
    width: 160px;
}
.csswizardary #logo
{
    float: left;
    margin-right: 20px;
}
.csswizardary #nav
{
    clear: none;
    float: left;
    width: 240px;
}
.csswizardary #nav li
{
    float: left;
    margin-right: 20px;
    width: 100px;
}
.csswizardary #nav a
{
    line-height: 32px;
    padding: 0;
    text-align: left;
}
.csswizardary #nav li:first-of-type, .csswizardary #nav li:nth-of-type(2)
{
    border-top: 1px solid #F7F7F7;
}
.csswizardary #nav li:last-of-type a
{
    border-bottom: 1px solid #F7F7F7;
}
.csswizardary h1
{
    margin: 0 0 24px;
    padding: 0;
}
.csswizardary .marginalia, .csswizardary .post-date, .csswizardary .comment-author
{
    float: none;
    margin-left: 0;
    text-align: center;
    width: auto;
}
.csswizardary p.marginalia
{
    font-style: italic;
    text-align: center;
}
.csswizardary .post-date
{
    text-align: left;
}
.csswizardary #content ul
{
    padding-left: 15px;
}
.csswizardary #footer
{
    padding: 0;
}
.csswizardary #smashing-network
{
    margin: 0 20px 0 0;
}
.csswizardary #smashing-network img
{
    display: block;
}
.csswizardary body
{
    padding: 5px;
    width: auto;
}
.csswizardary #header
{
    margin-right: 0 !important;
}
.csswizardary #header div
{
    position: static;
}
.csswizardary #logo a
{
    float: none;
    margin: 0 auto 24px;
}
.csswizardary div
{
    clear: both !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.csswizardary #nav
{
    text-align: center;
    width: auto;
}
.csswizardary .navigation
{
    padding: 0 !important;
}
.csswizardary .marginalia, .csswizardary .post-date, .csswizardary .comment-author
{
    float: none;
    margin-left: 0;
    text-align: center;
    width: auto;
}
.csswizardary p.marginalia
{
    font-style: italic;
    text-align: center;
}
.csswizardary img
{
    height: auto !important;
    max-width: 100% !important;
}
.csswizardary img.full, .csswizardary img.left, .csswizardary #ad img
{
    margin-left: 0;
}
.csswizardary h1
{
    margin: 0 0 24px;
    padding: 0;
    width: auto;
}
.csswizardary blockquote, .csswizardary pre, .csswizardary .outdent
{
    margin: 0 0 24px;
}
.csswizardary blockquote p
{
    padding-left: 0.5em;
}
.csswizardary .hr
{
    margin-left: 0;
}
.csswizardary fieldset, .csswizardary textarea
{
    width: auto !important;
}
.csswizardary .bsap, .csswizardary #bsap_aplink, .csswizardary #footer
{
    padding: 10px 0 !important;
    text-align: center;
}
.csswizardary #smashing-network
{
    float: none;
    margin: 0 auto 24px;
}
.csswizardary #smashing-network img
{
    display: block;
}